package myJs.newPasswordActive

import myJs.CpLayer._
import myJs.Implicits._
import myJs.api.Api
import myJs.assets.assetsCss
import myJs.cps._
import myJs.myPkg.jquery._
import myJs.myPkg.reactHookForm._
import myJs.myPkg.{BackstretchOptions, LayerOptions, ReactRouterDOM, layer}
import org.scalajs.dom
import org.scalajs.dom.{URLSearchParams, document}
import org.scalajs.dom.html.Canvas
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.Pojo.{EmailData, RegisterUserData}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.web.html._
import typings.csstype.csstypeStrings

import scala.scalajs.js
import scala.scalajs.js.JSConverters._
import scala.scalajs.js.JSON
import myJs.Implicits._
import myJs.Utils

@react object Cp {

  type Props = Unit

  private val css = List(
    assetsCss.Layer,
    assetsCss.Sweetalert,
    assetsCss.BootstrapMin,
    assetsCss.BootstrapThemeMin,
    assetsCss.Doc,
    assetsCss.BootstrapDatepicker3,
    assetsCss.FontAwesomeMin,
    assetsCss.Components,
    assetsCss.BootstrapTable,
    assetsCss.Nprogress,
    assetsCss.TableFilter,
    assetsCss.Login5Min,
  )

  case class GVerify(kind: String, height: Double, width: Double)

  private val css2 = List(
    assetsCss.BootstrapResponse,
    assetsCss.My
  )

  val component = FunctionalComponent[Props] { props =>
    val navigate = ReactRouterDOM.useNavigate()
    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val email = searchParams.get("email")
    val (buttonText, setButtonText) = useState(" 重发邮件")
    val (buttonDisabled, setButtonDisabled) = useState(false)

    object FTool {

      val count = 60

      def refreshRemainTime(count: Int) = {
        Utils.mySetInterval(count, curCount => {
          setButtonText(s"重发邮件（" + curCount + "）")
          setButtonDisabled(true)
        }, () => {
          setButtonText(s"重发邮件")
          setButtonDisabled(false)
        }
        )
      }
      def sendEmail = () => {
        refreshRemainTime(count)
        val request = EmailData(email = email)
        Api.newPasswordEmailValid(request).map { response =>
          if (!response.valid) {
            layer.msg(response.message, LayerOptions(icon = 5, time = 3000))
          }
        }
        ()
      }
    }

    useEffect(() => {
      val images = List("login_3.jpg", "login_2.jpg", "login_1.jpg").map { name =>
        s"${Api.images}/${name}"
      }.toJSArray
      $(".login-bg").backstretch(images = images, options = BackstretchOptions(fade = 1e3, duration = 8e3))
    }, List()
    )

    useEffect(() => {
      FTool.sendEmail()
    }, List()
    )

    useEffect(() => {
      startLoad
      document.title = s"邮箱验证-LiveForest"
      loadComplete
    }, List()
    )

    div(className := "login",
      div(className := "user-login-5",
        div(className := "row bs-reset",
          div(className := "col-md-6 login-container bs-reset",
            TitleInfoCp(),
            div(className := "login-content",
              div(className := "register",
                h2(className := "page-heading text-success", style := Style(fontSize = 25),
                  "邮箱验证"
                ),
              ),
              div(className := "row",
                div(className := "fgleftct", style := Style(textAlign = csstypeStrings.center, marginTop = 10,
                  display = csstypeStrings.flex, justifyContent = csstypeStrings.center),
                  div(style := Style(), className := "fglefttitle",
                    "我们已邮一封信到您的邮箱",
                    div(style := Style(fontSize = 20, marginTop = 0),
                      s"${email},", br(),
                    ),
                    "请查看您的邮箱按提示操作。", br(),
                    p(style := Style(fontSize = 16, maxWidth = 600),
                      " 如未收到邮件,请点击右边按钮重发。 ",
                      button(`type` := "button", className := "btn btn-xs btn-success", disabled := buttonDisabled,
                        onClick := FTool.sendEmail,
                        style := Style(borderRadius = 10, fontSize = 12),
                        buttonText
                      )
                    )
                  )
                )
              )

            ),
            div(className := "login-footer",
              div(className := "row bs-reset",
                div(className := "col-xs-12 bs-reset",
                  div(className := "login-copyright text-right",
                    p(style := Style(color = "black"),
                      "版权所有2018 深圳市绘云生物科技有限公司 All Rights Reserved"
                    )
                  )
                )
              )
            )
          ),
          div(className := "col-md-6 bs-reset",
            div(className := "login-bg")
          )
        )
      )
    )
  }

}
